<template>
    <div>
        <a-form
            ref="formRef"
            :model="form"
            label-position="left"
        >
            <a-form-item 
                v-for="item in fields"
                
                :label="item.label"
                :key="item.key"
            >
                <component
                    :is="item.type"
                    v-model="form[item.key]"
                    :options="item.options"
                >
                </component>
            </a-form-item>
            <div class="btns" v-if="hasBtns">
                <a-button @click="submit">{{ submitText }}</a-button>
                <a-button @click="reset">{{ resetText }}</a-button>
            </div>
        </a-form>
    </div>
</template>

<script>
export default {
    name:'MyForm',
    data(){
        return{
            form: this.initForm()
        }
    },
    props: {
        fields:{
            type: Array,
            default:()=>[]
        },
        hasControl :{
            type: Boolean,
            default: true
        },
        submitText:{
            type:String,
            default: '提交'
        },
        resetText:{
            type: String,
            default: '重置'
        },
        hasBtns:{
            type: Boolean,
            default: false
        }

        
    },
    methods: {
        initForm(){
            const form = {}
            this.fields.forEach(item => {
                form[item.key] = item.defaultValue
            });
            return form
        },
        submit() {
            this.$refs.formRef.validate((valid)=>{
                this.$emit('submit',this.form,valid)
            })
            console.log('submit');
            
        },
        reset(){
            this.form = {}
            console.log('reset');
            
        }
    }
}
</script>

<style lang="scss" scoped>

</style>